<template>
<div class='bigForm'>
    <el-button class='bacToIndex' @click="backtoIndex">返回</el-button>
    <el-dialog width="600px" title="欢迎登陆" center :closeOnClickModal='false' :showClose='false'  :visible.sync="dialogFormVisible3">
        <div>
            <el-form v-if='loging' :model="form2" :rules="rules2" ref="form2">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="账号密码登录" name="tab1"></el-tab-pane>
                <el-tab-pane label="手机号登录" name="tab2"></el-tab-pane>
            </el-tabs>
            <div class="content" v-if="activeTab === 'tab1'">
                <el-form-item label="用户名" prop='username'>
                    <el-input v-model="form2.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop='password'>
                    <el-input v-model="form2.password" placeholder="请输入密码" type="password"></el-input>
                </el-form-item>
            </div>
            <div class="content" v-else>
                <el-row>
                <el-form-item label="手机号" prop='mobile'>
                    <el-input v-model="form2.mobile" placeholder="请输入手机号"></el-input>
                </el-form-item>
                </el-row>
                <el-row :gutter='20' type="flex" align="bottom">
                <el-col :span='18'>
                    <el-form-item label="验证码" prop='captcha'>
                    <el-input v-model="form2.captcha" placeholder="请输入短信验证码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='6'>
                    <el-button type="primary" :disabled="codeDel != 60" style="margin-bottom: 22px;" @click="getIdCode('MEMBER_LOGIN')">{{codeMsg}}</el-button>
                </el-col>
                </el-row>  
                <!-- <el-form-item label="验证码" prop='captcha'>
                    <el-input v-model="form2.captcha" placeholder="请输入验证码" type="password"></el-input>
                </el-form-item>         -->
            </div>     
            </el-form>
            <el-form v-else :model="form2" :rules="rules2" ref="form2">      
            <el-form-item label="用户名" prop='username'>
                <el-input v-model="form2.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop='password'>
                <el-input v-model="form2.password" placeholder="至少六位，区分大小写" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop='password2'>
                <el-input v-model="form2.password2" placeholder="确认密码" type="password"></el-input>
            </el-form-item>    
            <el-form-item label="手机号" prop='mobile'>
                <el-input v-model="form2.mobile" placeholder="11位手机号">
                <template slot="prepend">+86</template>
                </el-input>
            </el-form-item>  
            <el-row :gutter='20' type="flex" align="bottom">
                <el-col :span='18'>
                <el-form-item label="验证码" prop='captcha'>
                    <el-input v-model="form2.captcha" placeholder="请输入短信验证码"></el-input>
                </el-form-item>
                </el-col>
                <el-col :span='6'>
                <el-button type="primary" :disabled="codeDel != 60" style="margin-bottom: 22px;" @click="getIdCode('MEMBER_REGISTER')">{{codeMsg}}</el-button>
                </el-col>
            </el-row>                  
            </el-form>
        </div>
        <div slot="footer" v-if='loging' class="dialog-footer">
            <div>                    
                <el-button type="text" @click="backtoIndex">返回</el-button>
            </div>
            <el-button type="default" @click="changeLogin(false)">去注册</el-button>
            <el-button type="primary" @click="toLoging">登录</el-button>
        </div>
        <div slot="footer" v-else class="dialog-footer">
            <el-button type="default" @click="changeLogin(true)">返回</el-button>
            <el-button type="primary" @click="toRegister">注册</el-button>
        </div>
        <Verify
            @success="capctchaCheckSucc"
            :mode="'pop'"
            :captchaType="'blockPuzzle'"
            :imgSize="{ width: '330px', height: '155px' }"
            ref="verify"
        ></Verify>
    </el-dialog>
    <div id='request'>  
        <img class='banner' src="../../assets/formTop.jpg" alt="">
        <div class='historyRequest' v-if='hasHis'>
            <el-table :data="historyList" border style="width: 100%" >
            <el-table-column prop="name" label="申请人" width="150"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
            <el-table-column prop="status" label="审核状态">
                <template slot-scope="scope">
                <!-- {{scope.row.status == 0 ? '待审核' : (scope.row.status == 1 ? '通过' : '驳回')}} -->
                <el-tag v-if="scope.row.status == -2" type="danger">审批不通过</el-tag>
                <el-tag v-if="scope.row.status == -1" type="warning">退回修改</el-tag>
                <el-tag v-if="scope.row.status == 3" type="info">待园区负责人审批</el-tag>
                <el-tag v-if="scope.row.status == 4" type="success">审批通过</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="commentParkLeader" label="审核回复" width="280"></el-table-column>
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                <el-button v-if="scope.row.status == -1" size="mini" type="primary" plain @click="detail(scope.row)">修改</el-button>
                </template>
            </el-table-column>
            </el-table>
            <!-- <h5 style="text-align:center; color: red; margin: 10px 0 0 0;">提醒：除退回修改外，无需再次提交</h5> -->
        </div>
        <div class='outLoginDiv'>
            <el-popover
            placement="top"
            width="160"
            class="outLogin"
            v-model="popVisible"
            >
            <p>确定登出该账号？</p>
            <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popVisible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="loginOut">确定</el-button>
            </div>
            <el-button slot="reference" type='primary' size='mini'>登出</el-button>
            </el-popover>
        </div> 
        <el-form :model='form' ref='form' :rules="rules" label-position='left'>
            <div class='title'>太仓市大学生创业园租金补贴申请表</div>
            <el-row :gutter="20">
                <el-col :span='12'>
                    <el-form-item label="申请人" prop='name'>
                        <el-input v-model='form.name'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="手机号码" prop='phone'>
                        <el-input v-model='form.phone'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="最高学历" prop='education'>
                        <el-select v-model="form.education" placeholder="请选择">
                            <el-option label="博士" value="博士"></el-option>            
                            <el-option label="硕士" value="硕士"></el-option>
                            <el-option label="本科" value="本科"></el-option>
                        </el-select>    
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="毕业院校" prop='schoolName'>
                        <el-input v-model="form.schoolName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="所属单位" prop='enterpriseName'>
                        <el-input v-model='form.enterpriseName'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="职务" prop='position'>
                        <el-input v-model='form.position'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="身份证" prop='idCard'>
                        <el-input v-model="form.idCard"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="公寓地址" prop='apartmentAddress'>
                        <el-input v-model='form.apartmentAddress'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="公寓面积" prop='apartmentArea'>
                      <el-input v-model='form.apartmentArea'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="月租金" prop='rent'>
                        <el-input v-model='form.rent'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="租期" prop='rentPeriod'>
                        <el-input v-model='form.rentPeriod'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="申请补贴金额" prop='subsidyAmount'>
                        <el-input v-model='form.subsidyAmount'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="已支付租金开始日期" prop='rentPayedStartTime'>
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.rentPayedStartTime"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd"
                            >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="已支付租金结束日期" prop='rentPayedEndTime'>
                        <el-date-picker
                            style="width: 100%"
                            v-model="form.rentPayedEndTime"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd"
                            >
                        </el-date-picker>
                    </el-form-item>
                </el-col>                
                <el-col :span='12'>
                    <el-form-item label="银行户名" prop='bankAccountName'>
                        <el-input v-model='form.bankAccountName'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="银行账号" prop='bankAccount'>
                        <el-input v-model='form.bankAccount'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item label="银行开户行" prop='bankName'>
                        <el-input v-model='form.bankName'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='24'>
                    <el-form-item label="申请人签字（本人承诺所填写内容的真实性，合法性，并愿意为此承担一切法律责任）">
                    <el-col :span='12'>
                        <el-popover
                        placement="bottom"
                        trigger="click">
                        <foot-market :type='1' @update='updateSignNUm'></foot-market>
                        <el-button slot="reference" class="signBtn" type="primary" plain>手机扫码添加签名</el-button>
                        </el-popover>
                    </el-col>        
                    <el-col :span='4'> 
                        <el-button type="primary" plain @click="getSignStore">更新签名</el-button>
                    </el-col>              
                    </el-form-item>
                </el-col>
                <el-col v-show="form.signApplicant" :span='24' >
                    <el-image style="width: 100px; height: 100px" :src="form.signApplicant"></el-image>
                    <el-button type="danger" icon="el-icon-delete" circle @click="form.signApplicant = ''"></el-button>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="border: 1px solid #cecdcd; ">
                <el-col :span='24'  style="border-bottom: 1px solid #cecdcd;" class="letterHight">
                    <el-form-item label="附件1：营业执照复印件加盖公章" label-width="365px" style="margin-bottom: 0" :required="true">            
                        <el-upload
                        class="upload-demo upload-demo-large"
                        multiple
                        :action='actionUrl'
                        :limit="2"
                        :file-list="form.fileBusiness"
                        :on-change="handleChange1"
                        :on-remove="handleChange1"
                        accept=".jpg,.png,.pdf"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                        <template slot="label">
                        附件1：营业执照复印件加盖公章 <br>
                        <span style="color: red;">提醒：请上传营业执照复印件加盖公章</span>
                        
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span='24'  style="border-bottom: 1px solid #cecdcd;" class="letterHight">
                    <el-form-item label="附件2：申请人身份证" label-width="365px" style="margin-bottom: 0" :required="true">            
                        <el-upload
                        class="upload-demo upload-demo-large"
                        multiple
                        :action='actionUrl'
                        :limit="2"
                        :file-list="form.fileIdCard"
                        :on-change="handleChange2"
                        :on-remove="handleChange2"
                        accept=".jpg,.png,.pdf"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                        <template slot="label">
                        附件2：申请人身份证<br>
                        <span style="color: red;">提醒：请上传申请人身份证</span>
                        
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span='24'  style="border-bottom: 1px solid #cecdcd;" class="letterHight">
                    <el-form-item label="附件3：申请人员学历证书" label-width="365px" style="margin-bottom: 0" :required="true">            
                        <el-upload
                        class="upload-demo upload-demo-large"
                        multiple
                        :action='actionUrl'
                        :limit="2"
                        :file-list="form.fileEducation"
                        :on-change="handleChange3"
                        :on-remove="handleChange3"
                        accept=".jpg,.png,.pdf"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                        <template slot="label">
                        附件3：申请人员学历证书<br>
                        <span style="color: red;">提醒：请上传申请人员学历证书</span>
                        
                        </template>
                    </el-form-item>
                </el-col>   
                <el-col :span='24'  style="border-bottom: 1px solid #cecdcd;" class="letterHight">
                    <el-form-item label="附件4：租房合同复印件" label-width="365px" style="margin-bottom: 0" :required="true">            
                        <el-upload
                        class="upload-demo upload-demo-large"
                        multiple
                        :action='actionUrl'
                        :limit="2"
                        :file-list="form.fileContract"
                        :on-change="handleChange4"
                        :on-remove="handleChange4"
                        accept=".jpg,.png,.pdf"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                        <template slot="label">
                        附件4：租房合同复印件<br>
                        <span style="color: red;">提醒：请上传租房合同复印件</span>
                        
                        </template>
                    </el-form-item>
                </el-col>               
                <el-col :span='24'  style="border-bottom: 1px solid #cecdcd;" class="letterHight">
                    <el-form-item  label="附件5：房租发票" label-width="365px" style="margin-bottom: 0" :required="true">            
                        <el-upload
                        class="upload-demo upload-demo-large"
                        multiple
                        :action='actionUrl'
                        :limit="2"
                        :file-list="form.fileInvoice"
                        :on-change="handleChange5"
                        :on-remove="handleChange5"
                        accept=".jpg,.png,.pdf"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                        <template slot="label">
                        附件5：房租发票 <br>
                        <span style="color: red;">提醒：请上传房租发票</span>
                        
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span='24' class="letterHight">
                    <el-form-item label="附件6：房租付款截图" label-width="365px" style="margin-bottom: 0" :required="true">            
                        <el-upload
                        class="upload-demo upload-demo-large"
                        multiple
                        :action='actionUrl'
                        :limit="2"
                        :file-list="form.fileBill"
                        :on-change="handleChange6"
                        :on-remove="handleChange6"
                        accept=".jpg,.png,.pdf"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                        <template slot="label">
                        附件6：房租付款截图 <br>
                        <span style="color: red;">提醒：请上传房租付款截图</span>
                        
                        </template>
                    </el-form-item>
                </el-col>
             </el-row>
             <div class='btns'>
                <el-button type="primary" @click="beforSubmit">
                    {{ form.status == -1 ? '提交修改' : '立即申请' }}
                </el-button>     
            </div>
        </el-form>
    </div>
    </div>
</template>
<script>

import Verify from '@/components/verifition/Verify'
import {registerSubmit, loginForm, getSms } from '../../api/requestForm.js'
import FootMarket from '../solution/components/FootMarket.vue'
import {SubmitFormzujin, SubmitFormzujin2, GetImgTempTime, GetZuJingFormList } from '../../api/requestForm.js'
import {
  Host_Ip2
} from "../../config.js"

export default {
    components: {
        FootMarket,
        Verify
    },
    data() {
        return {
            form: {
                fileBusiness: [],
                fileIdCard: [],
                fileEducation: [],
                fileContract: [],
                fileInvoice: [],
                fileBill: [],
                signApplicant: '',
            },
            randomNum: '',
            actionUrl: Host_Ip2 + '/dfs/upload',
            rules: {
                name: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { 
                        // pattern: /^(13[^4]|14[579]|15[^4\D]|16[6]|17[^49\D]|18\d|19[89])\d{8}$/,
                        pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
                        message: '请输入正确联系电话', trigger: 'blur' 
                    }
                ],
                idCard: [
                    { required: true, message: '请输入证件号码', trigger: 'blur' },
                    // { 
                    //   pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                    //   message: '请输入正确身份证号', trigger: 'blur' 
                    // }
                ],
                rentPayedStartTime: [
                    { required: true, message: '请选择已支付租金开始日期', trigger: 'blur' },
                ],
                rentPayedEndTime: [
                    { required: true, message: '请选择已支付租金结束日期', trigger: 'blur' },
                ],
                rentPeriod: [
                    { required: true, message: '请输入租期', trigger: 'blur' },
                ],
                subsidyAmount: [
                    { required: true, message: '请输入申请补贴金额', trigger: 'blur' },
                ],
            },
            hasHis: false,
            historyList: [
                {
                name: '审批不通过',
                status: -2,
                },
                {
                name: '退回修改',
                status: -1,
                },
                {
                name: '园区负责人审批',
                status: 3,
                },
                {
                name: '审批通过',
                status: 4,
                },
            ],
            codeDel: 60,
            codeMsg: '获取验证码',
            popVisible: false,
            form2: {},
            rules2: {
                password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, message: '密码至少六位', trigger: 'blur' }
                ],
                mobile: [
                { required: true, message: '此项必填', trigger: 'blur' },
                { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' },
                ],
                username: [
                { required: true, message: '此项必填', trigger: 'blur' },
                ],
                password2: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                {
                    validator: (rules2, value, callback) => {
                        if (value !== this.form2.password) callback(new Error('两次密码不一致'))
                        callback()
                    }, trigger: 'blur'
                }
                ],
                captcha: [
                { required: true, message: '请输入验证码', trigger: 'blur' },
                ],
            },            
            dialogFormVisible3: true,
            loging: true,
            activeTab: "tab1",
        }
    },
    methods: {
        updateSignNUm(num) {
            this.randomNum = num;
            console.log(num, 'num')
        },
        getSignStore(){
            let num = this.randomNum
            GetImgTempTime(num).then(res => {
                console.log(res, 'resssssss')
                if(!res.data.data) {
                this.$alert('请手机扫码签名！', '提示', {
                //  confirmButtonText: '确定',
                type: 'warning',
                center: true,
                callback: action => {}
                })
                }
                this.form.signApplicant = res.data.data;
            })
            console.log(this.randomNum, 'randomNum1')
        },
        beforSubmit() {
            // 校验
            if(!this.form.signApplicant) {
                const alertTxt = '请签名！ 若已签，请点击签名更新按钮！'
                if(this.ifMobile) {
                alertTxt = '请签名！ 若已签，请点击签名保存按钮！'
                }
                this.$alert(alertTxt, '提示', {
                //  confirmButtonText: '确定',
                type: 'warning',
                center: true,
                callback: action => {}
                })
                return
            }

            // 附件
            if(!this.form.fileBusiness.length) {
                this.$alert('请上传附件1：营业执照复印件加盖公章', '提示', {
                //  confirmButtonText: '确定',
                type: 'warning',
                center: true,
                callback: action => {}
                })
                return
            }
            if(!this.form.fileIdCard.length) {
                this.$alert('请上传附件2：申请人身份证', '提示', {
                //  confirmButtonText: '确定',
                type: 'warning',
                center: true,
                callback: action => {}
                })
                return
            }
            if(!this.form.fileEducation.length) {
                this.$alert('请上传附件3：申请人员学历证书', '提示', {
                //  confirmButtonText: '确定',
                type: 'warning',
                center: true,
                callback: action => {}
                })
                return
            }
            if(!this.form.fileContract.length) {
                this.$alert('请上传附件4：租房合同复印件', '提示', {
                //  confirmButtonText: '确定',
                type: 'warning',
                center: true,
                callback: action => {}
                })
                return
            }
            if(!this.form.fileInvoice.length) {
                this.$alert('请上传附件5：房租发票', '提示', {
                //  confirmButtonText: '确定',
                type: 'warning',
                center: true,
                callback: action => {}
                })
                return
            }
            if(!this.form.fileBill.length) {
                this.$alert('请上传附件6：房租付款截图', '提示', {
                //  confirmButtonText: '确定',
                type: 'warning',
                center: true,
                callback: action => {}
                })
                return
            }
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    console.log('submit!');
                    this.onSubmit()
                } else {
                    console.log('error submit!!');
                    this.$alert('表单填报内容有误', '提示', {
                    type: 'warning',
                    center: true,
                    callback: action => {}
                    })
                    return false;
                }
            }); 
        },
        onSubmit() {        
            const form = JSON.parse(JSON.stringify(this.form))
            form.fileBusiness = form.fileBusiness.length ? JSON.stringify(form.fileBusiness) : '[]'
            form.fileIdCard = form.fileIdCard.length ? JSON.stringify(form.fileIdCard) : '[]'
            form.fileEducation = form.fileEducation.length ? JSON.stringify(form.fileEducation) : '[]'
            form.fileContract = form.fileContract.length ? JSON.stringify(form.fileContract) : '[]'
            form.fileInvoice = form.fileInvoice.length ? JSON.stringify(form.fileInvoice) : '[]'
            form.fileBill = form.fileBill.length ? JSON.stringify(form.fileBill) : '[]'
            
            let params = JSON.stringify(form)
            if(form.status == -1) {
                SubmitFormzujin2(params).then((res) => {
                    console.log('submit', res)
                    if(res.data.code == 0) {
                        this.$message({
                            message: '提交成功',
                            type: 'success',
                            duration: 3000
                        })
                        location.reload()
                    } else {
                        console.log(res.data.msg)
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 3000
                        })
                    }
                })
            } else {
                SubmitFormzujin(params).then((res) => {
                    console.log('submit', res)
                    if(res.data.code == 0) {
                        this.$message({
                            message: '提交成功',
                            type: 'success',
                            duration: 3000
                        })
                        location.reload()
                    } else {
                        console.log(res.data.msg)
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 3000
                        })
                    }
                })
            }
            
        },
        // 附件修改
        handleChange1(file, fileList) {
            if(response.code !== 0) {
                this.$alert(response.msg, '提示', {
                type: 'warning',
                center: true,
                callback: action => {}
                })
                this.form.fileBusiness = []
            } else {
                this.form.fileBusiness = fileList.slice(-3);        
            }     
            console.log(this.form.fileBusiness, fileList, 'form.fileBusiness')
        },
        handleChange2(file, fileList) {
            if(response.code !== 0) {
                this.$alert(response.msg, '提示', {
                type: 'warning',
                center: true,
                callback: action => {}
                })
                this.form.fileIdCard = []
            } else {
                this.form.fileIdCard = fileList.slice(-3);        
            }        
            console.log(this.form.fileIdCard, fileList, 'form.fileIdCard')
        },
        handleChange3(file, fileList) {
            if(response.code !== 0) {
                this.$alert(response.msg, '提示', {
                type: 'warning',
                center: true,
                callback: action => {}
                })
                this.form.fileEducation = []
            } else {
                this.form.fileEducation = fileList.slice(-3);        
            }         
            console.log(this.form.fileEducation, fileList, 'form.fileEducation')
        },
        handleChange4(file, fileList) {   
            if(response.code !== 0) {
                this.$alert(response.msg, '提示', {
                type: 'warning',
                center: true,
                callback: action => {}
                })
                this.form.fileContract = []
            } else {
                this.form.fileContract = fileList.slice(-3);        
            }       
            console.log(this.form.fileContract, fileList, 'form.fileContract')
        },
        handleChange5(file, fileList) {
            if(response.code !== 0) {
                this.$alert(response.msg, '提示', {
                type: 'warning',
                center: true,
                callback: action => {}
                })
                this.form.fileInvoice = []
            } else {
                this.form.fileInvoice = fileList.slice(-3);        
            }           
            console.log(this.form.fileInvoice, fileList, 'form.fileInvoice')
        },
        handleChange6(file, fileList) {     
            if(response.code !== 0) {
                this.$alert(response.msg, '提示', {
                type: 'warning',
                center: true,
                callback: action => {}
                })
                this.form.fileBill = []
            } else {
                this.form.fileBill = fileList.slice(-3);        
            }     
            console.log(this.form.fileBill, fileList, 'form.fileBill')
        },
        getList() {
            this.historyList = []
            GetZuJingFormList().then(res => {  
                console.log(res, res.data.data, 'mine')
                if(res.data.code == 0  && res.data.data.length) {  
                    console.log(res, res.data.data.name, res.data.data.status,'上次填报内容')
                    this.hasHis = true
                    this.historyList = res.data.data
                } else {
                    this.hasHis = false
                }
            })
        },
        // 查看
        detail(row) {
            console.log(row, 'detail');
            this.form = row;   
            // 附件     
            this.form.fileBusiness = JSON.parse(row.fileBusiness)
            this.form.fileIdCard = JSON.parse(row.fileIdCard)
            this.form.fileEducation = JSON.parse(row.fileEducation)
             this.form.fileContract = JSON.parse(row.fileContract)
            this.form.fileInvoice = JSON.parse(row.fileInvoice)
            this.form.fileBill = JSON.parse(row.fileBill)
            console.log(this.form, 'this.form')   
        
        },
        // 图形验证
        capctchaCheckSucc (data) {
            this.capctchaCheck = true
            this.verify = data.captchaVerification
            // MEMBER_LOGIN MEMBER_REGISTER
            let sms = this.loging ? 'MEMBER_LOGIN' : 'MEMBER_REGISTER'
            this.getIdCode(sms)
        },
         // 获取验证码
        getIdCode(code) {
            if (!this.capctchaCheck) {
                this.$refs.verify.show()
                return false
            }
            // 验证码倒计时60s
            let that = this
            let form = {
                mobile: this.form2.mobile,
                smsType: code,
            }
            form = JSON.parse(JSON.stringify(form))
            console.log(form, 'code')
            getSms(form).then(res => {
                if(res.data.code == 0) {  
                console.log(res, 'getSms')
                function changeCodeDel() {
                    if(that.codeDel > 0) {        
                    that.codeDel --
                    that.codeMsg = '已发送' + that.codeDel + 's'
                    // console.log(that.codeDel)
                    } else {
                    that.codeDel = 60;
                    that.codeMsg = '获取验证码'
                    clearInterval(Interval)
                    that.capctchaCheck = false
                    }
                }
                let Interval = setInterval(() => {
                    changeCodeDel()
                }, 1000)
                } else {
                this.$message({
                    message: res.data.msg,
                    type: 'error',
                    duration: 3000
                })
                this.$refs.verify.refresh()
                }
            })
            // 增加倒计时不可点击
        },
        // 登录
        toLoging() {
            this.$refs['form2'].validate((valid) => {
                let that = this;
                if (valid) {
                    const form = JSON.parse(JSON.stringify(that.form2))
                    console.log(form, 'login')
                    loginForm(form).then(res => {
                    console.log(res)
                    if(res.data.code == 0) {          
                        that.dialogFormVisible3 = false;
                        this.$message({
                        message: '登录成功',
                        type: 'success',
                        duration: 3000
                        })
                        // 暂存token 手机号
                        localStorage.setItem('token', res.data.token)
                        localStorage.setItem('tel', res.data.mobile)   
                        this.getList();     
                    } else {
                        this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                        })
                    }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });     
        },
        // 登出
        loginOut() {
            this.popVisible = false;
            delete localStorage.token
            delete localStorage.tel
            location.reload()
        },
        // 注册
        toRegister() {
        this.$refs['form2'].validate((valid) => {
            let that = this;
            if (valid) {             
                const form = JSON.parse(JSON.stringify(that.form2))
                console.log(form, 'register')
                registerSubmit(form).then(res => {
                console.log(res)
                if(res.data.code == 0) {          
                    that.dialogFormVisible3 = false;
                    this.$message({
                    message: '注册成功，已登录',
                    type: 'success',
                    duration: 3000
                    })
                    localStorage.setItem('token', res.data.token)
                    localStorage.setItem('tel', res.data.mobile)
                    that.form.tel = res.data.mobile
                    that.loging = true
                    that.form2 = {};
                    that.getList();  
                } else {
                    this.$message({
                    message: res.data.msg,
                    type: 'error',
                    duration: 3000
                    })
                }
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });      
        },
        // 切换登录注册状态
        changeLogin(flag) {
            this.loging = flag;
            this.form2 = {};
        },
        ifLogin() {
            if(localStorage.getItem('token') && localStorage.getItem('tel')) {
                this.dialogFormVisible3 = false;
            }
        },
        backtoIndex() {
            this.$router.push({ path: '/social1' })
        },
    },
    mounted() {
        this.getList();     
    },
    created() {
        this.ifLogin()
    },
}
</script>
<style scoped lang='less'>
.bigForm {
  // background-color: #cfefdd;
  background-color: #adcde4;
  width: 100%;
}
#request {
  width: 900px;
  margin: 0 auto;
  .banner {
    width: 100%;
    height: 250px;
  }
  .historyRequest {
    // border: 1px solid red;
    margin-bottom: 10px;
    background-color: #e5edf3;
    padding: 20px;
    box-sizing: border-box;
}
}
.title {
    text-align: center;
    color: rgb(0, 132, 255);
    font-size: 24px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgb(206, 205, 205);
    margin-bottom: 10px;
}
.outLoginDiv {
    position: absolute;
    height: 55px;
    width: 720px;
    .outLogin {
      position: absolute;
      right: 0;
      z-index: 5;
      bottom: 0;
    }
  } 
  .bacToIndex {
  position: absolute;
  margin: 10px;
}
.el-form {
  // background-color: #e2f0e8;
  background-color: #e5edf3;
  padding: 20px;
  position: relative;
  top: -5px;
}
 .btns {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 50px;
    // border-top: 1px solid rgb(206, 205, 205);
}
 .el-radio-group,
  .el-select,
  .el-date-editor,
  .signBtn  {
    width: 100%;
  }
  .upload-demo {
    display: flex;
    
    }
</style>
<style>
.upload-demo .el-upload {
    width: 200px !important;
    border-left: 1px solid #cecdcd;
    border-right: 1px solid #cecdcd;;
    /* align-items: center;
    justify-content: center; */
    box-sizing: border-box;
  }
   .upload-demo-large .el-upload {
    height: auto;
    /* padding-top: 15px; */
  }
  .upload-demo-larger .el-upload {
    height: 115px;
    padding-top: 38px;
  }
  .upload-demo-larger2 .el-upload {
    height: 70px;
    padding-top: 13px;
  }
.letterHight .el-form-item__label {
line-height: 20px;;
}
</style>